<template>
    <div>

        <v-tabs v-model="tab_net" density="compact" style="flex-shrink: 0;">
            <v-tab value="home">在线用户</v-tab>
            <v-tab value="role">用户分组</v-tab>
            <v-tab value="linkSetting" @click="getRoomList()">连接设置</v-tab>
            <v-tab value="roomSetting">房间设置</v-tab>
        </v-tabs>
        <div style="width: 100%;overflow: auto;">

            <v-tabs-window v-model="tab_net">
                <v-tabs-window-item value="home">
                    <template v-if="linked">
                        <v-table density="compact">
                            <thead>
                                <tr>
                                    <th>用户名</th>
                                    <th>用户所在组</th>
                                </tr>
                            </thead>
                            <tbody>
                                <template v-for="user in room.usingRoom.userList" :key="user">
                                    <tr>
                                        <td>{{ user }}</td>
                                        <td>{{ room.usingRoom.userRoleList[user]?.join(",") }}</td>
                                    </tr>
                                </template>
                            </tbody>
                        </v-table>
                    </template>
                    <template v-else>
                        <v-row>
                            <v-col>
                                <span>您尚未连接到任何房间</span>
                            </v-col>
                        </v-row>
                    </template>
                </v-tabs-window-item>
                <v-tabs-window-item value="role">
                    <v-row noGutters>
                        <v-col>
                            <v-autocomplete hide-details density="compact" label="组名称" v-model="newRoll" clearable
                                :items="room.usingRoom.roomRoleList" no-data-text="未找到权限组" v-model:search="newRoll">
                            </v-autocomplete>
                        </v-col>
                        <v-col>
                            <FeedBackButton v-if="!room.usingRoom.roomRoleList.includes(newRoll ?? '')" name="添加"
                                color="success" block :disabled="newRoll == '' || newRoll == undefined"
                                @click="() => { room.setRoomRoleList([...room.usingRoom.roomRoleList, newRoll ?? '']) }">
                            </FeedBackButton>
                            <FeedBackButton v-else name="删除" color="error" block @click="() => {
                                room.setRoomRoleList(room.usingRoom.roomRoleList.filter((role) => role != newRoll))
                                newRoll = undefined
                            }">
                            </FeedBackButton>
                        </v-col>
                    </v-row>

                    <template v-if="!room.usingRoom.roomRoleList.includes(newRoll ?? '')">
                        <v-row>
                            <v-col>
                                请新建或选择一个权限组以继续
                            </v-col>
                        </v-row>
                    </template>
                    <template v-else-if="!linked">
                        <v-row>
                            <v-col>
                                请连接到某个房间以进行用户分组
                            </v-col>
                        </v-row>
                    </template>
                    <template v-else>
                        <v-table density="compact">
                            <thead>
                                <tr>
                                    <th>用户名</th>
                                    <th>用户所在组</th>
                                    <th>是否在该用户组</th>
                                </tr>
                            </thead>
                            <tbody>
                                <template v-for="user in room.usingRoom.userList" :key="user">
                                    <tr>
                                        <td>{{ user }}</td>
                                        <td>{{ room.usingRoom.userRoleList[user]?.join(",") }}
                                        </td>
                                        <td>
                                            <v-checkbox hide-details density="compact" :model-value="room.usingRoom.userRoleList[user]?.includes(newRoll ?? '')" @click="
                                            ()=>{
                                                if(room.usingRoom.userRoleList[user]?.includes(newRoll ?? '')){
                                                    room.setUserRoleList(room.usingRoom.userRoleList[user].filter((role) => role != newRoll), user)
                                                }else{
                                                    room.setUserRoleList([...(room.usingRoom.userRoleList?.[user] ?? []), newRoll ?? ''], user)
                                                }
                                            }
                                            "></v-checkbox>
                                        </td>
                                    </tr>
                                </template>
                            </tbody>
                        </v-table>
                    </template>
                </v-tabs-window-item>

                <v-tabs-window-item value="linkSetting">
                    <v-row>
                        <v-col>

                            <template v-if="linked">

                                您已作为{{ servers.connectSetting.userName }}连接到了房间{{
                                    servers.connectSetting.room
                                }}
                            </template>
                            <template v-else>
                                您尚未连接，请向您的主持人询问下述信息并填入
                            </template>
                        </v-col>
                    </v-row>
                    <v-row noGutters>
                        <v-col cols="3">
                            <v-text-field hide-details density="compact" v-model="servers.connectSetting.userName"
                                label="用户名" :disabled="linked"></v-text-field></v-col>
                        <v-col cols="9">
                            <v-text-field hide-details density="compact" v-model="servers.roomServer" label="服务器地址"
                                :disabled="linked"></v-text-field></v-col>
                    </v-row>
                    <v-row noGutters>
                        <v-col>
                            <v-autocomplete hide-details density="compact" v-model="servers.connectSetting.room"
                                label="房间名称" :items="roomList" no-data-text="未找到任何房间" :disabled="linked"
                                v-model:search="servers.connectSetting.room"
                                @update:focused="(b) => { if (b) { getRoomList() } }"></v-autocomplete></v-col>

                        <v-col>
                            <v-text-field hide-details density="compact" v-model="servers.connectSetting.enterPassword"
                                label="房间密码" placeholder="非必填" :disabled="linked"></v-text-field></v-col>

                        <v-col>
                            <v-text-field hide-details density="compact" v-model="servers.connectSetting.password"
                                label="房间权限码" placeholder="必填，用于管理房间" :disabled="linked"></v-text-field>
                        </v-col>
                    </v-row>
                    <v-row noGutters>
                        <v-col>
                            <FeedBackButton v-if="linked" name="断开连接" :disabled="disableConnect" color="error" block
                                @click="connect_btn()">
                            </FeedBackButton>
                            <FeedBackButton v-else name="连接" :disabled="disableConnect || !roomOnline" color="success"
                                block @click="connect_btn()">
                            </FeedBackButton>
                        </v-col>

                        <v-col>
                            <FeedBackButton v-if="roomOnline" name=" 关闭房间" :disabled="disableRoom" color="error" block
                                @click="room_btn()">
                            </FeedBackButton>
                            <FeedBackButton v-else name="创建并连接房间" :disabled="disableRoom" color="success" block
                                @click="room_btn()">
                            </FeedBackButton>
                        </v-col>
                    </v-row>
                </v-tabs-window-item>
                <v-tabs-window-item value="roomSetting">
                </v-tabs-window-item>
            </v-tabs-window>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { useServers } from '@/stores/servers';
import { getConnection } from '@/ts/connect/connection';
import { getRoomList, roomClose, roomCreate, roomList } from "@/ts/romoteRoom";
import FeedBackButton from '@/components/button/FeedBackButton.vue';
import { reqGetInitData, reqSelfAuthor } from '@/ts/connect/requestMessage';
import { useRoom } from '@/stores/room';
//stores
const servers = useServers()
const room = useRoom()


const tab_net = ref("home")
const disableConnect = ref(false)
const disableRoom = ref(false)
const newRoll = ref<string | undefined>(undefined)
const linked = computed(() => {
    return servers.roomConnection?.workable == undefined ? false : servers.roomConnection?.workable
})
watch(linked, (newValue) => {
    if (!newValue) {
        room.usingRoom.userList = []
    }
})
const roomOnline = computed(() => {
    return roomList.value.includes(servers.connectSetting.room)
})

function connect_btn() {
    if (linked.value) {
        servers.roomConnection?.close()
    } else {
        disableConnect.value = true
        servers.roomConnection = getConnection(servers.connectSetting)
        servers.roomConnection?.open().then(() => { servers.roomConnection?.sendMessage(reqGetInitData()) }).finally(() => disableConnect.value = false)
    }
}
function room_btn() {
    if (roomOnline.value) {
        disableRoom.value = true
        roomClose(servers.connectSetting).finally(() => { disableRoom.value = false })
    } else {
        disableRoom.value = true
        roomCreate(servers.connectSetting).then(() => {
            servers.roomConnection?.sendMessage(reqSelfAuthor())
        }).finally(() => { disableRoom.value = false })
    }
}
const getRoleDescription = (role: string) => {
    switch (role) {
        case 'compare': return '主持人';
        case 'everyone': return '所有人';
        default:
            if (role.startsWith('$')) {
                return '玩家：' + role.slice(1);
            }
            return '';
    }
};
</script>

<style scoped></style>